<section>
  <header><h3>各种分页导航</h3></header>
  <article>
    <div class="example">
      <ul class="pager">
        <li class="previous">
          <a href="#">«</a>
        </li>
        <li class="next">
          <a href="#">»</a>
        </li>
      </ul>
      <ul class="pager">
        <li class="previous">
          <a href="#">« 上一页</a>
        </li>
        <li class="next">
          <a href="#">下一页 »</a>
        </li>
      </ul>
      <ul class="pager">
        <li class="previous">
          <a href="#">«</a>
        </li>
        <li>
          <a href="#">1</a>
        </li>
        <li class="active">
          <a href="#">2</a>
        </li>
        <li>
          <a href="#">3</a>
        </li>
        <li>
          <a href="#">4</a>
        </li>
        <li>
          <a href="#">5</a>
        </li>
        <li class="next">
          <a href="#">»</a>
        </li>
      </ul>
      <ul class="pager">
        <li class="previous">
          <a href="#">«</a>
        </li>
        <li>
          <a href="#">1</a>
        </li>
        <li>
          <a href="#">2</a>
        </li>
        <li>
          <a href="#">3</a>
        </li>
        <li>
          <a href="#">4</a>
        </li>
        <li class="active">
          <a href="#">5</a>
        </li>
        <li>
          <a href="###" data-toggle="pager" data-placement="bottom">更多</a>
        </li>
        <li>
          <a href="#">12</a>
        </li>
        <li class="next">
          <a href="#">»</a>
        </li>
      </ul>
      <ul class="pager">
        <li class="previous">
          <a href="#">« 上一页</a>
        </li>
        <li>
          <a href="#">1</a>
        </li>
        <li>
          <a href="###" data-toggle="pager" data-placement="top" data-url=
          "?page=%">Pager</a>
        </li>
        <li>
          <a href="#">6</a>
        </li>
        <li class="active">
          <a href="#">7</a>
        </li>
        <li>
          <a href="#">8</a>
        </li>
        <li>
          <a href="#">9</a>
        </li>
        <li>
          <a href="###" data-toggle="pager" data-placement="top">...</a>
        </li>
        <li>
          <a href="#">12</a>
        </li>
        <li class="next">
          <a href="#">下一页 »</a>
        </li>
      </ul>
    </div>
  </article>
</section>

<section>
  <header><h3>禁用的导航</h3></header>
  <article>
    <div class="example">
  <ul class="pager">
    <li class="previous disabled">
      <a href="#">«</a>
    </li>
    <li class="next">
      <a href="#">»</a>
    </li>
  </ul>
  <ul class="pager">
    <li class="previous">
      <a href="#">« 上一页</a>
    </li>
    <li class="next disabled">
      <a href="#">下一页 »</a>
    </li>
  </ul>
  <ul class="pager">
    <li class="previous disabled">
      <a href="#">«</a>
    </li>
    <li class="active">
      <a href="#">1</a>
    </li>
    <li>
      <a href="#">2</a>
    </li>
    <li>
      <a href="#">3</a>
    </li>
    <li>
      <a href="#">4</a>
    </li>
    <li>
      <a href="#">5</a>
    </li>
    <li class="next">
      <a href="#">»</a>
    </li>
  </ul>
  <ul class="pager">
    <li class="previous">
      <a href="#">«</a>
    </li>
    <li>
      <a href="#">1</a>
    </li>
    <li>
      <a href="###" data-toggle="pager">Pager</a>
    </li>
    <li>
      <a href="#">118</a>
    </li>
    <li>
      <a href="#">119</a>
    </li>
    <li>
      <a href="#">1110</a>
    </li>
    <li>
      <a href="#">1111</a>
    </li>
    <li class="active">
      <a href="#">12</a>
    </li>
    <li class="next disabled">
      <a href="#">»</a>
    </li>
  </ul>
  <br>
    </div>
  </article>
</section>

<section>
  <header><h3>圆角样式</h3></header>
  <article>
    <p><code>.pager-pills</code></p>
    <div class="example">
  <ul class="pager pager-pills">
    <li class="previous disabled">
      <a href="#">«</a>
    </li>
    <li class="next">
      <a href="#">»</a>
    </li>
  </ul>
  <ul class="pager pager-pills">
    <li class="previous">
      <a href="#">« 上一页</a>
    </li>
    <li class="next disabled">
      <a href="#">下一页 »</a>
    </li>
  </ul>
  <ul class="pager pager-pills">
    <li class="previous disabled">
      <a href="#">«</a>
    </li>
    <li class="active">
      <a href="#">1</a>
    </li>
    <li>
      <a href="#">2</a>
    </li>
    <li>
      <a href="#">3</a>
    </li>
    <li>
      <a href="#">4</a>
    </li>
    <li>
      <a href="#">5</a>
    </li>
    <li class="next">
      <a href="#">»</a>
    </li>
  </ul>
  <ul class="pager pager-pills">
    <li class="previous">
      <a href="#">«</a>
    </li>
    <li>
      <a href="#">1</a>
    </li>
    <li>
      <a href="###" data-toggle="pager" data-placement="top">...</a>
    </li>
    <li>
      <a href="#">8</a>
    </li>
    <li>
      <a href="#">9</a>
    </li>
    <li>
      <a href="#">10</a>
    </li>
    <li>
      <a href="#">11</a>
    </li>
    <li class="active">
      <a href="#">12</a>
    </li>
    <li class="next disabled">
      <a href="#">»</a>
    </li>
  </ul>
  <br>
    </div>
  </article>
</section>

<section>
  <header><h3>宽松样式</h3></header>
  <article>
    <p><code>.pager-loose</code></p>
    <div class="example">
      <ul class="pager pager-loose">
        <li class="previous disabled">
          <a href="#">«</a>
        </li>
        <li class="next">
          <a href="#">»</a>
        </li>
      </ul>
      <ul class="pager pager-loose">
        <li class="previous">
          <a href="#">« 上一页</a>
        </li>
        <li class="next disabled">
          <a href="#">下一页 »</a>
        </li>
      </ul>
      <ul class="pager pager-loose">
        <li class="previous disabled">
          <a href="#">«</a>
        </li>
        <li class="active">
          <a href="#">1</a>
        </li>
        <li>
          <a href="#">2</a>
        </li>
        <li>
          <a href="#">3</a>
        </li>
        <li>
          <a href="#">4</a>
        </li>
        <li>
          <a href="#">5</a>
        </li>
        <li class="next">
          <a href="#">»</a>
        </li>
      </ul>
      <ul class="pager pager-loose">
        <li class="previous">
          <a href="#">«</a>
        </li>
        <li>
          <a href="#">1</a>
        </li>
        <li>
          <a href="###" data-toggle="pager" data-placement="top">...</a>
        </li>
        <li>
          <a href="#">8</a>
        </li>
        <li>
          <a href="#">9</a>
        </li>
        <li>
          <a href="#">10</a>
        </li>
        <li>
          <a href="#">11</a>
        </li>
        <li class="active">
          <a href="#">12</a>
        </li>
        <li class="next disabled">
          <a href="#">»</a>
        </li>
      </ul>
      <ul class="pager pager-loose pager-pills">
        <li class="previous disabled">
          <a href="#">«</a>
        </li>
        <li class="next">
          <a href="#">»</a>
        </li>
      </ul>
      <ul class="pager pager-loose pager-pills">
        <li class="previous">
          <a href="#">« 上一页</a>
        </li>
        <li class="next disabled">
          <a href="#">下一页 »</a>
        </li>
      </ul>
      <ul class="pager pager-loose pager-pills">
        <li class="previous disabled">
          <a href="#">«</a>
        </li>
        <li class="active">
          <a href="#">1</a>
        </li>
        <li>
          <a href="#">2</a>
        </li>
        <li>
          <a href="#">3</a>
        </li>
        <li>
          <a href="#">4</a>
        </li>
        <li>
          <a href="#">5</a>
        </li>
        <li class="next">
          <a href="#">»</a>
        </li>
      </ul>
      <ul class="pager pager-loose pager-pills">
        <li class="previous">
          <a href="#">«</a>
        </li>
        <li>
          <a href="#">1</a>
        </li>
        <li>
          <a href="###" data-toggle="pager" data-placement="top">...</a>
        </li>
        <li>
          <a href="#">8</a>
        </li>
        <li>
          <a href="#">9</a>
        </li>
        <li>
          <a href="#">10</a>
        </li>
        <li>
          <a href="#">11</a>
        </li>
        <li class="active">
          <a href="#">12</a>
        </li>
        <li class="next disabled">
          <a href="#">»</a>
        </li>
      </ul>
    </div>
  </article>
</section>

<section>
  <header><h3>两端对齐</h3></header>
  <article>
    <p><code>.pager-justify</code></p>
    <div class="example">
      <ul class="pager pager-justify">
        <li class="previous disabled">
          <a href="#">«</a>
        </li>
        <li class="next">
          <a href="#">»</a>
        </li>
      </ul>
      <ul class="pager pager-justify">
        <li class="previous">
          <a href="#">« 上一页</a>
        </li>
        <li class="next disabled">
          <a href="#">下一页 »</a>
        </li>
      </ul>
      <ul class="pager pager-justify pager-pills">
        <li class="previous disabled">
          <a href="#">«</a>
        </li>
        <li class="next">
          <a href="#">»</a>
        </li>
      </ul>
      <ul class="pager pager-justify pager-pills">
        <li class="previous">
          <a href="#">« 上一页</a>
        </li>
        <li class="next disabled">
          <a href="#">下一页 »</a>
        </li>
      </ul>
    </div>
  </article>
</section>
